<template>
	<view class="page-content">
		<map style="
		    width: 100%;
		    height: 100%;
		  " :latitude="formdata.lng" :longitude="formdata.lat">
		</map>
		<view class="form-box">
			<u-form :label-style="labelStyle">
				<u-form-item label="门牌号"><u-input input-align="right" v-model="formdata.houseNumber" /></u-form-item>
				<u-form-item label="地址"><u-input input-align="right" v-model="formdata.address" disabled
						@click="getMapLocation" /></u-form-item>
				<u-form-item label="联系人"><u-input input-align="right" v-model="formdata.contacts" /></u-form-item>
				<u-form-item label="手机号"><u-input input-align="right" v-model="formdata.phone" /></u-form-item>
			</u-form>
			<view class="add-address">
				<view class="submit" @click="handleSumit">
					保存地址
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mine from "../../../../api/mine.js";
	import utils from "../../../../utils/util.js";
	export default {
		data() {
			return {
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap",
				},
				formdata: {
					lng: 0,
					lat: 0,
					address: '',
					houseNumber: '',
					contacts: '',
					phone: '',
					id: '',
				}
			};
		},
		onLoad(option) {
			if (option.id) {
				this.getAddressDetailById(option.id);
			}
			utils.getLocationInfo().then((res) => {
				this.formdata.lat = res.latitude;
				this.formdata.lng = res.longitude;
			});
		},
		methods: {
			//定位选择详细地址
			getMapLocation() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.lat = res.longitude;
					this.formdata.lng = res.latitude;
					this.formdata.address = res.name;
				});
			},
			handleSumit() {
				if (this.formdata.id)
					mine.updateAddress(this.formdata).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '更新成功',
								icon: 'none'
							});
							setTimeout(() => uni.navigateBack(), 1500)
						} else
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
					})
				else {
					delete this.formdata.id;
					mine.addAddress(this.formdata).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							});
							setTimeout(() => uni.navigateBack(), 1500)
						} else
							uni.showToast({
								title: '添加失败',
								icon: 'none'
							});
					})
				}
			},
			getAddressDetailById(id) {
				mine.getAddressDetailById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;

		.form-box {
			z-index: 999;
			position: absolute;
			top: 90rpx;
			left: 32rpx;
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			width: calc(100% - 64rpx);
		}

		.add-address {
			.submit {
				height: 88rpx;
				background: #FCD610;
				border-radius: 88rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>